<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="月份" prop="date">
        <el-select
          v-model="queryParams.date"
          placeholder="请选择月份"
          clearable
        >
          <el-option
            v-for="yuefen in yuefenList"
            :key="yuefen.id"
            :label="yuefen.label"
            :value="yuefen.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div id="container" style="height: 500px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { listWeather } from "@/api/weather/weather";

export default {
  name: "Attr",
  dicts: ["sys_normal_disable"],
  data() {
    return {
      maxTemList: [],
      minTemList: [],
      dateList: [],
      yuefenList: [
        { id: 1, label: "1月" },
        { id: 2, label: "2月" },
        { id: 3, label: "3月" },
        { id: 4, label: "4月" },
        { id: 5, label: "5月" },
        { id: 6, label: "6月" },
        { id: 7, label: "7月" },
        { id: 8, label: "8月" },
        { id: 9, label: "9月" },
        { id: 10, label: "10月" },
        { id: 11, label: "11月" },
        { id: 12, label: "12月" },
      ],
      weatherList: [],
      // 日期范围
      dateRange: [],
      // 遮罩层
      loading: true,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 查询参数
      queryParams: {
        date: "1月",
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    drawChart() {
      // 数据验证
      if (!this.weatherList || this.weatherList.length === 0) {
        console.log('No weather data available.');
        return;
      }

      this.maxTemList = this.weatherList.map((item) => parseFloat(item.maxTem));
      this.minTemList = this.weatherList.map((item) => parseFloat(item.minTem));
      this.dateList = this.weatherList.map((item) => {
        const dateParts = item.date.split("-");
        return dateParts[2].split("T")[0]; // 提取出日期中的天数部分
      });

      // 动态生成标题
      const title = `2024年${this.queryParams.date}温度统计`;

      var option = {
        title: {
          text: title,
          left: 'center',
          textStyle: {
            color: '#333',
            fontSize: 20
          }
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          textStyle: {
            color: '#fff'
          },
          formatter: function (params) {
            let str = params[0].name + '<br>';
            params.forEach(item => {
              str += `${item.seriesName}: ${item.value} °C<br>`;
            });
            return str;
          }
        },
        legend: {
          top: '5%',
          data: ['最高温度', '最低温度'],
          textStyle: {
            color: '#666'
          }
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none"
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {}
          },
          right: '5%'
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.dateList,
          axisLabel: {
            rotate: 45,
            interval: 'auto',
            color: '#666'
          },
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          }
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} °C",
            color: '#666'
          },
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#eee'
            }
          }
        },
        series: [
          {
            name: "当日最高温度",
            type: "line",
            data: this.maxTemList,
            itemStyle: {
              color: '#ff7f50'
            },
            lineStyle: {
              color: '#ff7f50',
              width: 2
            },
            markPoint: {
              data: [
                { type: "min", name: "min" },
                { type: "max", name: "max" }
              ],
              itemStyle: {
                color: '#ff7f50'
              }
            },
            markLine: {
              data: [
                { type: "average", name: "Avg" }
              ],
              lineStyle: {
                color: '#ff7f50',
                type: 'dashed'
              }
            }
          },
          {
            name: "当日最低温度",
            type: "line",
            data: this.minTemList,
            itemStyle: {
              color: '#1e90ff'
            },
            lineStyle: {
              color: '#1e90ff',
              width: 2
            },
            markPoint: {
              data: [
                { type: "min", name: "min" },
                { type: "max", name: "max" }
              ],
              itemStyle: {
                color: '#1e90ff'
              }
            },
            markLine: {
              data: [
                { type: "average", name: "Avg" }
              ],
              lineStyle: {
                color: '#1e90ff',
                type: 'dashed'
              }
            }
          }
        ]
      };

      if (document.getElementById("container")) {
        var myChart = echarts.init(document.getElementById("container"));
        myChart.setOption(option);
        window.addEventListener('resize', () => {
          myChart.resize();
        });
      }
    },
    /** 查询规格属性列表 */
    getList() {
      this.loading = true;
      listWeather(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.weatherList = response.rows;
          this.total = response.total;
          this.loading = false;
          this.drawChart();
        }
      );
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        maxTem: null,
        minTem: null,
        date: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    }
  }
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>    